<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :file-list="fileList"
    :http-request="succesFn"
    :limit="1"
    :on-remove="removeFn"
  >
    <i class="el-icon-plus" />
  </el-upload>

</template>

<script>
import COS from 'cos-js-sdk-v5'

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDhDTSBdohJeiUzDBsHQItDF0UhdHekZ7N',
  SecretKey: '0jBMHvIOCjzziALFrCG3YmjPovmMfgQt'
})
export default {
  data() {
    return {
      fileList: [],
      percent: 0
    }
  }, methods: {
    // res是组件内置的参数
    succesFn(res) {
      console.log(res)
      this.fileList.push({ url: '' }) // 上传图片之前添加数组,必须添加url属性，不然显示不出
      // 因为vue不能监听后面的添加的属性，因此需要提前添加属性
      cos.putObject({
        Bucket: 'fdc-project-1312874538', /* 必须储存桶的名字 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须文件名 字符串 */
        StorageClass: 'STANDARD',
        Body: res.file // 需要 上传文件对象
      }, (err, data) => {
        // 因为在组件里面，this没有指向 需要讲普通函数改为箭头函数
        // console.log(err || data)
        if (!err) {
          // 保存返回图片在线地址 成功以后通过腾讯云返回
          this.fileList[0].url = 'http://' + data.Location
        }
      })
    },
    //
    removeFn() {
      this.fileList = []
    }
  }
}

</script>

<style lang='scss'>
.upload-file-cos{
  width: 150px;
  .el-upload--picture-card{
    display: none;
  }
}
</style>
<style scoped>
.el-progress{
  width: 100%;
}
</style>
